import { Button } from "antd-mobile";
import { DownFill } from 'antd-mobile-icons'
import "./home.less"
import xiaolang from '@/assets/images/home/xiaolang.png'
import { homeDataApi } from '@/http/api'
import { useEffect, useState } from "react";
import SubjectItem from "./components/SubjectsItem";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { changeName } from '../../store/userSlice'
export default function Home() {

    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [state, setState] = useState<HomeData>()
    useEffect(() => {
        homeDataApi().then(res => {
            if (res?.errCode === 0) {
                // 渲染
                setState(res.data)
                // 把当前的学科存入 redux
                dispatch(changeName(res.data.exam.title))
            }
        })
    }, [])

    return <div className="home">
        <div className="top-header">
            <h3>{state?.exam.title}</h3>
            <div>
                <Button onClick={() => navigate('/subjects')} color="primary" fill="none">切换考试科目</Button>
                <DownFill />
            </div>
        </div>
        <div className="wel">
            <div className="text">欢迎Tomato来到XX学习库！</div>
            <div className="b">
                <div className="left">
                    <img src={xiaolang} alt="" />
                </div>
                <div className="right">
                    <ul className="t">
                        <li>已学{state?.study}题</li>
                        <li>共{state?.exam.itemCount}题</li>
                    </ul>
                    <ul className="b">
                        <li>
                            <div className="num">{state?.wrong}</div>
                            <div className="text">错题</div>
                        </li>
                        <li>
                            <div className="num">{state?.collect}</div>
                            <div className="text">收藏</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div className="subjects">
            {
                state?.exemItems.map(item => <SubjectItem data={item} key={item.id} />)
            }

        </div>
    </div>
}